<template>
    <div class="remarkVue">
        <div class="flex_between">
            <div class="label">好友备注信息</div>
            <span style="color: #0147fd; cursor: pointer;" @click="toEdit">编辑备注</span>
        </div>
        <div class="inpVue">
            <div class="key">姓名</div>
            <el-input placeholder="未设置姓名备注" style="width: 100%; margin-top: 8px; color: #333;" v-model="currentChat.remarkFriendName" disabled></el-input>
        </div>
        <div class="inpVue">
            <div class="key">手机</div>
            <el-input placeholder="未设置手机备注" style="width: 100%; margin-top: 8px" v-model="currentChat.remarkPhone" disabled></el-input>
        </div>
        <div class="inpVue">
            <div class="key">标签</div>
            <div class="inner">
                <template v-if="currentChat.tag">
                    <el-tag type="info" v-for="(item, index) in currentChat.tag.split(',')" :key="index" size="mini">{{ item }}</el-tag>
                </template>
            </div>
        </div>
        <div class="inpVue">
            <div class="key">分组</div>
            <el-input placeholder="未设置分组" style="width: 100%; margin-top: 8px" v-model="currentChat.categoryName" disabled></el-input>
        </div>            
        <div class="inpVue">
            <div class="key">AI对话总结</div>
            <textarea placeholder="未设置AI对话总结" v-model="currentChat.summary" disabled></textarea>
        </div>
        <div class="inpVue">
            <div class="key">手动备注</div>
            <textarea placeholder="未设置手动备注" v-model="currentChat.remarkNotes" disabled></textarea>
        </div>

        <!-- ----------------------------------- 设置备注信息------------------------------------ -->
        <el-drawer title="设置备注信息" :visible.sync="drawer" direction="rtl" :before-close="handleClose">
            <div class="drawerVue">
                <div class="inpVue" style="margin-top: 0;">
                    <div class="key">姓名</div>
                    <el-input placeholder="未设置姓名备注" style="width: 100%; margin-top: 8px; color: #333;" v-model="remarkFriendName"></el-input>
                </div>
                <div class="inpVue">
                <div class="key">手机</div>
                    <el-input placeholder="未设置手机备注" style="width: 100%; margin-top: 8px" v-model="remarkPhone"></el-input>
                </div>
                <div class="inpVue">
                    <div class="key">标签</div>
                    <el-select v-model="value" placeholder="选择标签" style="width: 100%; margin-top: 10px" @change="tagChange">
                        <el-option v-for="item in tags" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                    <div class="inner">
                        <template v-if="tag">
                            <el-tag type="info" v-for="(item, index) in tag.split(',')" :key="index" size="mini">{{ item }}</el-tag>
                        </template>
                    </div>
                </div>
                <div class="inpVue">
                    <div class="flex_between">
                        <div class="key">分组</div>
                        <span style="color: #0147fd; font-weight: 600; cursor: pointer; font-size: 13px;" @click="isCreateCategory=true">创建分组</span>
                    </div>
                    <!-- 创建分组 -->
                    <div class="flex" v-if="isCreateCategory">
                        <el-input placeholder="请输入分组名称" style="width: 100%; margin-top: 8px" v-model="name"></el-input>
                        <el-button size="mini" type="sure" @click="changeCategoryName">确认</el-button>
                        <el-button size="mini" type="cancel" @click="isCreateCategory=false">取消</el-button>
                    </div>
                    <!-- 选择分组 -->
                    <el-select v-model="categoryName" placeholder="选择分组" style="width: 100%; margin-top: 8px;" @change="categoryChange" clearable v-else>
                        <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item">
                            <div class="flex_between align_center" style="height: 34px;">
                                <span style="color: #333; font-weight: normal; font-size: 13px;">{{ item.name }}</span>
                                <span class="el-icon-delete" @click.stop="deleteCategory(item.id)"></span>
                            </div>
                        </el-option>
                    </el-select>
                </div>            
                <div class="inpVue">
                    <div class="key">AI对话总结</div>
                    <textarea placeholder="未设置AI对话总结" v-model="summary"></textarea>
                </div>
                <div class="inpVue">
                    <div class="key">手动备注</div>
                    <textarea placeholder="未设置手动备注" v-model="remarkNotes"></textarea>
                </div>
                <div class="btn" @click="submitFun">确认</div>
            </div>  
        </el-drawer>
    </div>
</template>


<script>
import { mapState } from "vuex"
import { toast } from "@/common/tools"
export default {
    data(){
        return {
            drawer: false,
            remarkFriendName: "",
            remarkPhone: "",
            categoryName: "",
            summary: "",
            remarkNotes: "",
            categoryList: [],
            isCreateCategory: false,
            name: "",
            tag: "",
            value: "",
            tags: ["高意向","中意向","低意向","了解产品详情", "询问价格", "询问使用方法", "询问发货时间", "询问售后服务", "非常满意", "满意", "一般", "不满意", "非常不满意", "产品质量", "发货时间", "售后服务", "使用问题", "价格问题", "新客户", "忠实客户", "活跃", "潜在", "流失"],
        }
    },
    computed: {
        ...mapState({
            currentChat: state=> state.currentChat,
            currentWeChat: state=> state.currentWeChat,
        })
    },
    methods: {
        toEdit(){
            this.drawer = true
            this.remarkFriendName = this.currentChat.remarkFriendName
            this.remarkPhone = this.currentChat.remarkPhone
            this.tag = this.currentChat.tag
            this.categoryName = this.currentChat.categoryName
            this.categoryId = this.currentChat.categoryId
            this.summary = this.currentChat.summary
            this.remarkNotes = this.currentChat.remarkNotes
            this.getCategoryList()
        },

        handleClose(){
            this.drawer = false
        },

        categoryChange(e){
            this.categoryName = e.name
            this.categoryId = e.id
        },

        tagChange(e){
            this.value = ""
            let list = this.tag.split(",")
            if(list.indexOf(e)==-1) {
                list.push(e)
            }
            this.tag = list.join(",")
        },

        // 设置备注
        submitFun(){
            console.log(this.tag)
            this.$post("/front/wechat/friend/addAndModifyFriendRemark", {
                id: this.currentChat.id,
                userWechatPrimaryId: this.currentWeChat.currentWeChatId,
                remarkFriendName: this.remarkFriendName,
                friendWechatIdOrGroupWechatId: this.currentChat.type===0 ? this.currentChat.friendWechatId : this.currentChat.groupId,
                type: this.currentChat.type,
                remarkMailbox: "",
                remarkQq: "",
                remarkWechat: "",
                remarkPhone: this.remarkPhone,
                tag: this.tag,
                summary: this.summary,  //AI总结
                remarkNotes: this.remarkNotes,
                categoryId: this.categoryId
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "设置成功")
                    this.drawer = false
                    this.$emit("opration", 2)
                    let obt = this.currentChat
                    obt.remarkFriendName = this.remarkFriendName
                    obt.remarkPhone = this.remarkPhone
                    obt.tag = this.tag
                    obt.summary = this.summary
                    obt.remarkNotes = this.remarkNotes
                    obt.categoryName = this.categoryName
                    obt.categoryId = this.categoryId
                    this.$store.state.currentChat = obt
                }
            })
        },

        // 获取分组列表
        getCategoryList(){
            this.$post("/front/wechat/friend/categoryList").then(res=>{
                if(res.data.code===0) {
                    this.categoryList = res.data.obj
                }
            })
        },

        // 删除分组
        deleteCategory(id){
            this.$post("/front/wechat/friend/delCategory", { id }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "删除成功")
                    this.getCategoryList()
                }
            })
        },

        // 创建分组
        changeCategoryName(){
            if(!this.name) return toast(1, "请输入分组名称")
            this.$post("/front/wechat/friend/createCategory", {
                name: this.name
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "创建成功")
                    this.name = ""
                    this.getCategoryList()
                    this.isCreateCategory = false
                }else{
                    toast(1, res.data.msg)
                }
            })
        }
    }
}
</script>


<style lang="less" scoped>
:deep(.el-drawer) {
    width: 350px !important;
    box-sizing: border-box;
}
:deep(.el-drawer__header) {
    padding: 15px !important;
    margin-bottom: 0;
}
:deep(.el-drawer__body) {
    padding: 0 15px;
}
:deep(.el-button--sure) {
    background: #0147fd;
    height: 40px;
    margin-top: 8px;
    margin-left: 10px;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--cancel) {
    background: #AAA;
    margin-top: 8px;
    height: 40px;
    span {
        color: #fff !important;
    }
}
.remarkVue {
    width: 350px;
    height: 100%;
    background: #fff;
    border-left: 1px solid #f5f5f5;
    padding: 15px 15px 0;
    overflow-y: scroll;
    .drawerVue {
        width: 100%;
        height: 100%;
        padding-bottom: 20px;
        overflow-y: scroll;
    }
    .drawerVue::-webkit-scrollbar{
        width: 0;
        height: 0;
    }
    .btn {
        width: 100%;
        height: 40px;
        background: #0147fd;
        border-radius: 5px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        margin-top: 20px;
        cursor: pointer;
    }
    .inpVue {
        margin-top: 20px;
        .key {
            color: #333;
            font-size: 13px;
        }
        .inner {
            width: 100%;
            height: 80px;
            border-radius: 4px;
            background: #FAFAFA;
            margin-top: 8px;
            padding: 10px;
            border: #E4E7ED 1px solid;
            overflow: scroll
        }
        .inner::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        textarea {
            width: 100%;
            height: 100px;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            display: block;
            resize: none;
            padding: 5px;
            line-height: 1.4;
            color: #606266;
            font-size: 12px;
            font-family: PingFangSC, PingFang SC;
            margin-top: 8px;
        }

        ::-webkit-input-placeholder { /* WebKit browsers */
            color: #AAA;
            font-size: 12px;
            font-family: PingFangSC, PingFang SC;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #AAA;
            font-size: 12px;
            font-family: PingFangSC, PingFang SC;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #AAA;
            font-size: 12px;
            font-family: PingFangSC, PingFang SC;
        }
        :-ms-input-placeholder { /* Internet Explorer 10+ */
            color: #AAA;
            font-size: 12px;
            font-family: PingFangSC, PingFang SC;
        }
        textarea::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
}
.remarkVue::-webkit-scrollbar {
    width: 0;
    height: 0;
}
</style>